<template>
	<ul class = "oneWrap" v-if = "msg.length">
		<router-link :to = "'/one/'+item.hpcontent_id" tag = "li" v-for = "(item,index) of handleMsg" :key = "item.hpcontent_id">
			<p class = "maketime">{{item.maketime}}</p>
			<span class = "hp_title">{{item.hp_title}}</span>
			<div class = "imgWrap">
				<img :src="item.hp_img_url" alt="">
			</div>
			<p class = "author">{{item.hp_author}} | {{item.image_authors}}</p>
			<p class = "content">{{item.hp_content}}</p>
		</router-link>
	</ul>
</template>

<script>
import axios from 'axios'
export default {
	name : 'oneMain',
	data () {
		return {
			msg : []
		}
	},
	methods : {
		getOneInfo () {
			axios.get("http://v3.wufazhuce.com:8000/api/hp/more/0?channel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android").then(this.getOneInfoSucc);
		},
		getOneInfoSucc (res) {
			if(res.data.res === 0 && res.data.data){
				this.msg = res.data.data;
			} else {
				console.log("请求失败" + res.data.res);
				return;
			}
		}
	},
	mounted () {
		this.getOneInfo();
	},
	computed : {
		handleMsg () {
			for(let i of this.msg) {
				i.maketime = i.maketime.substr(0,10).replace(/-/g," / ")
			}
			return this.msg;
		}
	}
}
</script>

<style lang = "less" scoped>
	.oneWrap {
		padding-top:.88rem;
		background:#F6F6F6;
		text-align: center;
		>li{
			background: #fff;
			margin-bottom:.2rem;
			.maketime {
				font:.4rem/.44rem 'Courier New';
				color:#000;
				padding:.4rem 0 .2rem;
			}
			.hp_title {
				font:.2rem/.28rem "Microsoft Yahei";
				color:#808080;
			}
			.imgWrap {
				height:0;
				overflow:hidden;
				padding-bottom:66.66%;
				margin:.2rem 0 .5rem; 
				img {
					width:100%;
					float:left;
				}
			}
			.author {
				opacity:.6;
			}
			.content {
				text-align: left;
				opacity: 0.6;
			    font-size: .28rem;
			    line-height: .52rem;
			    padding:.4rem .4rem .36rem;
			}
		}
	} 
</style>